import React, { PureComponent } from 'react';
import { Tabs, Button } from 'antd';
import { connect } from 'dva';
import moment from 'moment';
import ListItem from "@/components/ListCard";

const TabPane = Tabs.TabPane;

const Keys = [
  { key: 'id', name: '序号' },
  { key: 'rawType', name: '报警类型' },
  { key: 'status', name: '报警状态' },
  { key: 'createTime', name: '报警时间' },
  { key: 'rawType', name: '处理时间' },
  { key: 'rawType', name: '处理结果' },
  { key: 'rawType', name: '处理人' }
]

interface IProps {
  dispatch?: Function,
  details: {
    id: number,
    companyId: number
  },
  match: {
    params: {
      id: number
    }
  },
}

interface IState {
  data: Array<any>
}

@connect(({ position_patrol_user }) => ({
  details: position_patrol_user.details
}))
class Details extends PureComponent<IProps, IState> {

  readonly state: IState = {
    data: []
  };

  componentDidMount() {
    const { dispatch, match } = this.props;
    const { params } = match;

    dispatch({
      type: 'position_patrol_user/queryInfoById',
      payload: params.id
    }).then(() => {
      const { details } = this.props;
      const data = [];
      let regKey = /Time$/; // 若是时间的话格式化
      Keys.forEach(item => {
        data.push({
          name: item.name,
          value: item.key.match(regKey) ? moment(details[item.key]).format("YYYY-MM-DD hh:mm:ss") : details[item.key]
        })
      });

      this.setState({
        data
      })
    })
  }

  callback = () => {};

  render() {
    return (
      <>
        <Tabs defaultActiveKey="1" onChange={ this.callback }>
          <TabPane tab="处理记录" key="1">
            <ListItem data={ this.state.data }/>
          </TabPane>
          <TabPane tab="基础信息" key="2">
            <h4>设备基础信息</h4>
            <ListItem data={ this.state.data }/>
            <h4>设备其他信息</h4>
            <ListItem data={ this.state.data }/>
          </TabPane>
          <TabPane tab="户籍建筑" key="3">
            Content of Tab Pane 3
          </TabPane>
        </Tabs>
        <div className="foo">
          <Button onClick={ () => {
            window.history.back();
          } }>返回</Button>
        </div>
      </>
    );
  }
}

export default Details;


